<template>
  <div class="detail-wrap">
    <div class="flow-begin distance">
      <div class="hookbox"><img src="../../images/icon_1.png" class="hook" onclick="return false"/></div>
      <div class="tip">提现处理中</div>
      <div class="withtime">{{startTime | format}}</div>
    </div>
    <div class="line-box">
      <div class="active"></div>
    </div>

    <div class="flow-begin">
      <div class="hookbox"><img :src="fork1" class="hook" onclick="return false"/></div>
      <div class="tip word" :class="{'midway':type == 2}">财务已处理</div>
      <div class="withtime"><span v-if="type == 2">{{middleTime | format}}</span></div>
    </div>
    <div class="line-box">
      <div class="line" :class="{'active':type == 2}"></div>
      <div class="line-title dist1" v-show="tip == 1 || tip == 2">财务处理提现，已提交到银行进行转账</div>
    </div>

    <div class="flow-begin">
      <div class="hookbox"><img :src="fork2" class="hook" onclick="return false"/></div>
      <div class="tip word" :class="{'midway':type == 2}">银行已处理</div>
      <div class="withtime"><span v-if="type == 2">{{endTime}}</span></div>
    </div>
    <div class="line-box">
      <div class="line-title dist2" v-show="tip == 2">银行处理转账，具体到账时间请留意银行短信通知</div>
    </div>

    <div class="bank-box">
      <div class="bank-con money">
        <div class="title">提现金额</div>
        <div class="info">￥<span v-text="money"></span></div>
      </div>
      <div class="bank-con">
        <div class="title" v-text="bankName"></div>
        <div class="info">尾号<span v-text="tailNum"></span></div>
      </div>
    </div>

    <div class="tips">预计到账时间半个工作日，节假日顺延</div>
  </div>
</template>

<script>
  import {formatDate} from "../../common/js/util"
  import {baseUrl} from "../../common/js/env"

  export default {
    data() {
      return {
        userSign: "",
        money: "",
        bankName: "",
        tailNum: "",
        type: "",
        startTime: "",
        middleTime: "",
        endTime: "",
        fork1: require("./fork.png"),
        fork2: require("./fork.png"),
        tip: 0
      }
    },
    mounted() {
      let base64 = require('js-base64').Base64;
      this.userSign = base64.decode(sessionStorage.getItem("user_sign"));
      //查询账单详情
      this.axios.get(baseUrl + "/billrecord/query_withdrawrecord?id=" + this.$route.query.id + "&type=2" + "&sgin=" + this.userSign).then((res) => {
        let detailObj = res.data;
        if (detailObj.code == 0 && detailObj.data != null) {
          this.money = detailObj.data.money;
          this.bankName = detailObj.data.bankName;
          this.tailNum = detailObj.data.bankNum;
          this.type = detailObj.data.type;
          this.startTime = detailObj.data.time;
          this.middleTime = detailObj.data.set_time;
          //财务已处理
          if (this.type == 2) {
            this.tip = 1;
            this.fork1 = require("../../images/icon_1.png");

            //银行已处理
            let curTime = new Date().getTime();
            let accountTime = this.middleTime + 2 * 60 * 60 * 1000;
            if (curTime >= accountTime) {
              this.tip = 2;
              // this.endTime = formatDate(new Date(accountTime), 'yyyy-MM-dd hh:mm');
              this.fork2 = require("../../images/icon_1.png");
            }
          }
        } else {
          this.$vux.toast.text(detailObj.msg, "middle");
        }
      }).catch(() => {
        this.$vux.toast.text("网络异常", "middle");
      });
    },
    filters: {
      format(time) {
        let date = new Date(time);
        return formatDate(date, 'yyyy-MM-dd hh:mm');
      },
    }
  }
</script>

<style lang="stylus" scoped>
  .detail-wrap
    width: 100%
    height: 100%
    .flow-begin
      display: flex
      justify-content: space-between
      align-items: center
      width: 100%
      height: 0.453rem
      .hookbox
        margin-left: 5%
        width: 0.533rem
        height: 0.533rem
        .hook
          width: 100%
          height: 100%
      .tip
        margin-right: auto
        margin-left: 0.267rem
        font-size: 0.48rem
        color: rgba(27, 27, 27, 1)
      .word
        color: rgba(102, 102, 102, 1)
      .midway
        color: rgba(27, 27, 27, 1)
      .withtime
        margin-right: 5%
        font-size: 0.293rem
        color: rgba(102, 102, 102, 1)
    .distance
      margin-top: 0.573rem
    .line-box
      display: flex
      justify-content: start
      width: 90%
      height: 2.96rem
      margin 0 auto
      .line
        width: 0.04rem
        height: 100%
        background: rgba(197, 197, 197, 1)
        margin-left: 0.245rem
      .active
        width: 0.04rem
        height: 100%
        margin-left: 0.245rem
        background: rgb(60, 175, 255)
      .line-title
        font-size: 0.347rem
        color: rgba(153, 153, 153, 1)
        margin-top: 0.28rem
      .dist1
        margin-left: 0.53rem
      .dist2
        margin-left: 0.82rem
    .flow-end
      margin-top: 0rem
      margin-bottom: 3.2rem
    .bank-box
      margin: 0 auto
      width: 90%
      height: 2.573rem
      background: rgba(60, 175, 255, 1)
      border-radius: 0.173rem
      margin-bottom: 0.6rem
      .bank-con
        display: flex
        flex-direction: row
        align-items: center
        width: 100%
        height: 50%
        color: #FFFFFF
        .title
          margin-left: 0.267rem
          font-size: 0.44rem
        .info
          margin-left: auto
          margin-right: 0.267rem
          font-size: 0.44rem
      .money
        border-bottom: 0.013rem solid rgba(238, 238, 238, 1)

    .tips
      display: flex
      justify-content: center
      font-size: 0.44rem
      color: rgba(102, 102, 102, 1)
</style>
